.widget-wrap {
  margin: 50px 0;
}

.widget {
  color: @color-gray-text;
  text-shadow: 0 1px @color-light-text;
  border-radius: 1em;
  padding: 15px;
  line-height: 1.6em;
  word-wrap: break-word;
  font-size: 0.95em;
  .box-shadow(1px 2px .5em @color-shadow);
  .border-solid;
  .bg-light;

  a {
    .hover-color(@color-gray-text, @color-light-text);
  }

  li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    @media (min-width: @screen-phone) {
      .transition-transform(.3s);

      &:hover,
      &:focus {
        .translate3d(1em, 0, 0);
      }
    }
  }

  &-title {
    margin-left: 16px;
    margin-bottom: .35em;
  }
}

.category-list-count,
.tag-list-count,
.archive-list-count {
  padding-left: 5px;
  color: @color-gray-text;
  font-size: 0.85em;

  &:before {
    content: "(";
  }

  &:after {
    content: ")";
  }
}

.tagcloud a {
  margin-right: 5px;
}

.qrcode {
  background: no-repeat center;
  background-size: contain;
  height: 192px;
}

#sidebar #ds-recent-comments {
  .ds-comment {
    border-top: 1px dashed @color-border;

    @media (min-width: @screen-phone) {
      &:hover .ds-avatar img {
        .transform(rotate3d(0, 1, 0, 360deg));
      }
    }
  }

  .ds-avatar {
    padding: 5px;
    width: 36px;
    height: 36px;
    border-radius: 46px;
    background: #FAFAFA;
    margin-top: 5px;
    .box-shadow(-1px 0 1px fade(#000000, 15%) inset);

    a {
      display: inline-block;
      padding: 1px;
      width: 32px;
      height: 32px;
      border: 1px solid #b9baa6;
      border-radius: 50%;
      background-color: #fff !important;
      margin: -3px 0 0 -3px;
    }

    img {
      width: 32px !important;
      height: 32px !important;
      border-radius: 32px;
      .transition-transform(.6s ease-in-out);
      .box-shadow(0 1px 3px fade(#000000, 22%));
      margin: -3px 0 0 -3px;
    }
  }
}
